<template>
  <view>
    <z-paging ref="paging" :auto="false" v-model="dataList" @query="queryList" @onRefresh="onRefresh">
      <template slot="top">
        <scroll-view scroll-x class="bg-white nav">
          <view class="flex text-center">
            <view class="cu-item flex-sub" :class="tabValue === item.value ? 'text-blue cur' : ''"
              v-for="item in tabList" :key="item.value" @tap="tabSelect(item)" :data-id="item.value">
              {{ item.label }}
            </view>
          </view>
        </scroll-view>
      </template>
      <view class="cu-card">
        <view class="cu-item shadow" v-for="item in dataList" :key="item.id">
          <SpecialItem :data="item"></SpecialItem>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
import * as SpecialTask from "@/api/special-task.js"
import SpecialItem from "./special-item.vue"
export default {
  components: { SpecialItem },
  data() {
    return {
      tabList: [
        { label: '全部', value: '' },
        { label: '待处理', value: 0 },
        { label: '已完成', value: 1 },
        { label: '已延期', value: 2 },

      ],
      tabValue: '',
      dataList: []
    }
  },
  onShow() {
    this.dataList = []

    this.$refs.paging.reload(true)
  },
  onLoad(options) {
    const { status } = options
    this.tabValue = status == null ? '' : Number(status)
  },
  methods: {
    onRefresh() {
      console.log('this.onRefresh');
    },
    async queryList(pageNo, pageSize) {
      try {
        const res = await SpecialTask.getTaskListData({
          pageNo,
          pageSize,
          taskStatus: this.tabValue
        })
        this.$refs.paging.complete(res.data.list)
      } catch (e) {
        this.$refs.paging.complete(false)
      }
    },
    tabSelect(item) {
      this.tabValue = item.value
      this.handleSearch()
    },
    handleSearch() {
      this.$refs.paging.reload(true)
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #F6F6F6;

  .cu-card>.cu-item {
    border-radius: 8rpx;
    margin: 32rpx 0;
    background-color: transparent;
  }
}
</style>
